<template>
  <page-scroll :footer="true">
    <template #bg>
      <div class="bg"></div>
    </template>
    <template #header>
      <gltitle
        :title="title"
        :is_name="true"
        :is_back="true"
        :is_lang="false"
        :is_kf="false"
      ></gltitle>
    </template>
    <template #content>
      <div class="container">
        <div class="box1">
          <div class="am">
            <div class="n">{{ $t("new.doc20") }}</div>
            <p>
              <span>{{ common.decal2(info.orderAmount) }}</span
              >USDT
            </p>
          </div>
          <ul class="db">
            <li>
              <div class="s">{{ common.decal2(info.todayIncome) || 0 }}</div>
              <div class="n">{{ $t("new.doc21") }}</div>
            </li>
            <li>
              <div class="s">{{ common.decal2(info.orderCount) || 0 }}</div>
              <div class="n">{{ $t("page3.doc40") }}</div>
            </li>
            <li>
              <div class="s">
                {{ common.decal2(info.estimateTotalIncome) || 0 }}
              </div>
              <div class="n">{{ $t("new.doc15") }}</div>
            </li>
          </ul>
        </div>
        <div class="listBox">
          <div class="cname">{{ $t("page3.doc14") }}</div>
          <ul class="tab flex">
            <li
              v-for="(item, k) in tabData"
              :key="k"
              :class="{ on: cid == item.cid }"
              @click="onTab(item)"
            >
              {{ item.name }}
            </li>
          </ul>

          <div class="empty db rel" style="z-index: 3" v-show="emptyShow">
            <div class="flexs">
              <van-empty
                class="custom-image"
                :image="require('../../assets/images/none.png')"
                :description="$t('load.doc1')"
              />
            </div>
          </div>

          <van-pull-refresh
            v-model="refreshing"
            :success-text="$t('load.refreshed')"
            @refresh="onRefresh(0)"
            head-height="50"
            v-if="!emptyShow"
          >
            <van-list
              v-model="loading"
              :finished="finished"
              :finished-text="$t('load.no_more')"
              :loading-text="$t('load.loading')"
              @load="onLoad"
              :immediate-check="check"
            >
              <div class="list">
                <div
                  class="item"
                  v-for="(item, index) in datalist"
                  :key="index"
                >
                  <div class="head">
                    <img
                      :src="
                        item.productImg ||
                        require('@/assets/images/invest/item-head-bg.png')
                      "
                      alt=""
                    />
                    <div class="head-content">
                      <div class="title">{{ item.productName }}</div>
                      <div
                        class="buy-btn"
                        @click="path_url(`/invest/detail`, item)"
                      >
                        {{ $t("new.doc24") }}
                      </div>
                    </div>
                  </div>
                  <div class="info-list">
                    <div class="info">
                      <div class="name">{{ $t("page4.doc123") }}</div>
                      <div class="value active">
                        {{ 100 + common.accMul(item.rate, 100) * item.days }}%
                      </div>
                    </div>
                    <div class="info">
                      <div class="name">{{ $t("page3.doc43") }}</div>
                      <div class="value">
                        {{ common.decal2(item.orderAmount) }} USDT
                      </div>
                    </div>
                    <div class="info">
                      <div class="name">{{ $t("new.doc19") }}</div>
                      <div class="value">
                        {{ $t("page3.doc36", { i1: item.days }) }}
                      </div>
                    </div>
                    <div class="info" v-if="cid == 10">
                      <div class="name">{{ $t("page3.doc23") }}</div>
                      <div class="value">{{ item.endDate }}</div>
                    </div>
                    <div class="info" v-if="item.hasRedeem">
                      <div class="name">{{ $t("new.doc55") }}</div>
                      <div class="value tips">{{ $t("new.doc56") }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </van-list>
          </van-pull-refresh>
        </div>
      </div>
    </template>
  </page-scroll>
</template>

<script>
export default {
  data() {
    return {
      title: this.$t("page3.doc9"),
      cid: 1,
      tabData: [
        { name: this.$t("page3.doc16"), cid: 1 },
        { name: this.$t("new.doc23"), cid: 10 },
      ],
      datalist: [],
      loading: false,
      finished: false,

      totalPage: "",
      pageSize: 0,
      refreshing: false,
      emptyShow: false,
      datalistNum: 0,
      check: true,
      info: [],
    };
  },

  mounted() {
    this.$post(this.URL.financial.view, {}).then((res) => {
      if (res.code == 0) {
        this.info = res.data;
      } else {
        this.$toast(res.message);
      }
    });
  },

  methods: {
    onTab(item) {
      this.cid = item.cid;
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = document.documentElement.scrollTop = 0;
      this.pageSize = 0;
      this.totalPage = "";
      this.finished = false;
      this.loading = true;
      this.datalist = [];
      this.emptyShow = false;
      this.onLoad();
    },

    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.datalist = [];
          this.refreshing = false;
        }
        this.getlist();
      }, 100);
    },
    onRefresh() {
      this.finished = false;
      this.loading = true;

      this.pageSize = 0;
      this.totalPage = "";

      this.onLoad();
    },

    getlist() {
      this.pageSize = this.pageSize + 1;

      if (this.pageIndex == this.totalPage) {
        this.loading = false;
        this.finished = true;

        return;
      }

      this.$post(this.URL.financial.record, {
        status: this.cid,
        page: this.pageSize,
        pageSize: 10,
      }).then((res) => {
        if (res.code == 0) {
          if (res.code == 2001) {
            this.loading = true;
            this.finished = false;
            this.emptyShow = true;
            return;
          }

          this.totalPage = res.data.page.totalPage;
          this.pageIndex = res.data.page.index;

          this.datalistNum = res.data.page.count;

          let initData = res.data.list;
          this.datalist.push(...initData);
          this.emptyShow = this.datalist.length == 0;
          this.loading = false;
        } else {
          this.$toast(res.message);
        }
      });
    },

    path_url(url, item) {
      this.$router.push({ path: url, query: { orderId: item.orderId } });
    },
  },
};
</script>

<style lang="less" scoped>
.cname {
  font-size: 0.36rem;
  color: #ffffff;
  font-weight: 600;
  margin-bottom: 0.2rem;
  line-height: 0.5rem;
}

.box1 {
  background: linear-gradient(180deg, #f8f8e0 0%, #f6ce9a 100%);
  text-align: center;
  padding: 0.32rem;
  margin-bottom: 0.45rem;
  border-radius: 16px;

  * {
    color: #693f13 !important;
  }

  .am {
    margin-bottom: 0.3rem;

    .n {
      font-size: 0.28rem;
      line-height: 0.4rem;
      margin-bottom: 0.08rem;
      color: rgba(255, 255, 255, 0.6);
    }

    p {
      line-height: 1.1;

      span {
        font-size: 0.56rem;
        margin-right: 0.4rem;
      }

      font-size: 0.48rem;
    }
  }

  ul {
    li {
      padding: 0 0.24rem;

      .s {
        color: #ffffff;
        line-height: 150%;
        font-weight: bold;
      }

      .n {
        color: rgba(255, 255, 255, 0.6);
        line-height: 0.32rem;
        font-size: 0.24rem;
      }
    }
  }
}

.listBox {
  .tab {
    margin-bottom: 0.24rem;
    background: #181c21;
    border-radius: 100rem;
    overflow: hidden;
    //padding: 0.08rem;

    li {
      flex: 1;
      height: 0.66rem;
      line-height: 1.2;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 0.32rem;
      background: #181c21;
      border-radius: 0.1rem;
      font-size: 0.28rem;
      color: #fff;
      gap: 0.25rem;

      //margin-right: .24rem;
      &:before {
        content: "";
        width: 0.1rem;
        height: 0.1rem;
        background: #fff;
      }

      &.on {
        background: linear-gradient(90deg, #FAD7A6 0%, #DAAB6A 100%);
        color: #000;
        border-radius: 100rem;
        &:before {
          content: "";
          background: #000;
        }
      }
    }
  }

  .list {
    .item {
      border-radius: 0.24rem;
      background: #181c21;
      overflow: hidden;

      &:nth-of-type(n + 2) {
        margin-top: 0.24rem;
      }

      .head {
        position: relative;

        img {
          width: 100%;
          height: 1.36rem;
        }

        .head-content {
          width: 100%;
          position: absolute;
          top: 50%;
          left: 0;
          transform: translate(0, -50%);
          padding: 0 0.32rem;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .title {
            color: #fff;
            font-size: 0.28rem;
          }

          .buy-btn {
            border-radius: 1.8rem;
            background: linear-gradient(90deg, #FAD7A6 0%, #DAAB6A 100%);
            color: #000;
            font-size: 0.24rem;
            padding: 0.14rem 0.24rem;
          }
        }
      }

      .info-list {
        padding: 0.32rem;

        .info {
          display: flex;
          align-items: center;
          justify-content: space-between;

          &:nth-of-type(n + 2) {
            margin-top: 0.24rem;
          }

          .name {
            color: #bdbdbd;
            font-size: 0.26rem;
          }

          .value {
            color: #fff;
            font-size: 0.26rem;

            &.tips {
              border-radius: 1rem;
              background: #0bca57;
              padding: 0.12rem 0.24rem;
              color: #fff;
              font-size: 0.24rem;
            }
          }

          .active {
            color: #FFDD9A;
          }
        }
      }
    }
  }
}
</style>
